<template>
    <div class='songsdetail' id="control_img">
     <van-nav-bar
        title="歌曲播放"
        left-text="返回"
        right-text="搜索"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <audio id="audioqi" v-for="v in list" :key="v.id" autoplay controls loop="loop">
          <source :src="v.url">
      </audio>
      <p id="zi">热门评论</p>
      <van-card
          tag="热评"
          v-for="(i,index) in pings" :key="index"
          :desc="i.content"
          :title="i.user.nickname"
          :thumb="i.user.avatarUrl"
        />
    </div>
</template>

<script>
import {gequpin,songsdetail} from "../../api/boke/clstitle"
export default {
    components: {},
    data() {
        return {
            // id:'',
            list:[],
            words:[],
            soog:[],
            pings:[]
        };
    },
    computed: {},
    watch: {},
    methods: {
      async getDetail(id) {
        // 歌曲地址
        const result = await songsdetail(id)
        this.list = result.data.data
        // 评论
        const pin = await gequpin(id)
        this.pings = pin.data.hotComments
    },
     async onClickLeft() {
        this.$router.go(-1) 
      },
     async onClickRight() {
        this.$router.push({
          name:'Search',
        })
      },
    },
   async created() {
    this.id = this.$route.params.id
    this.getDetail(this.id)
    },
    mounted() {
        
    },
    beforeCreate() {}, 
    beforeMount() {},
    beforeUpdate() {}, 
    updated() {}, 
    }
</script>
<style scoped>
    .songsdetail{
      position: absolute;
      height: 100%;
      width: 100%;
      font-size: .25rem;
    }
    #audioqi{
       margin: .2rem .6rem;
    }
    #zi{
      font-size: .5rem;
    }
    .van-card__title{
      font-size: .3rem;
      font-weight: 700;
    }
    .van-card__desc{
     margin-top: .2rem;
    }
</style>